
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>编辑页面</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/style/custom.css}" media="all">
</head>
<body>

  <div class="layui-form" lay-filter="atomic-form-edit" id="atomic-form-edit" style="padding: 20px 30px 0 0;">
    <input type="hidden" id="id" name="id" th:value="${service.id}"/>
    <div class="layui-form-item">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
        <label class="layui-form-label">接口服务描述</label>
        <div class="layui-input-block">
          <input type="text" name="serviceDesc" th:value="${service.serviceDesc}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
      </div>
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
        <label class="layui-form-label">接口名称</label>
        <div class="layui-input-block">
          <input type="text" name="serviceName" th:value="${service.serviceName}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">接口服务地址</label>
      <div class="layui-input-block">
        <input type="text" name="serviceUri" th:value="${service.serviceUri}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
        <label class="layui-form-label">执行类型</label>
        <div class="layui-input-block">
          <select name="execType" lay-filter="select" lay-verify="required">
            <option value="">请选择</option>
            <option value="sync" th:selected="${service.execType == 'sync'}" >同步</option>
            <option value="async" th:selected="${service.execType == 'async'}" >异步</option>
          </select>
        </div>
      </div>
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
        <label class="layui-form-label">数据类型</label>
        <div class="layui-input-block">
          <select name="dataType" lay-filter="select" lay-verify="required">
            <option value="">请选择</option>
            <option value="json" th:selected="${service.dataType == 'json'}" >JSON</option>
            <option value="xml" th:selected="${service.dataType == 'xml'}" >XML</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">回调地址</label>
      <div class="layui-input-block">
        <input type="text" name="callbackUrl" th:value="${service.callbackUrl}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <input type="radio" name="status" value="Y" title="启用" th:checked="${ service.status == null || service.status == 'Y'} ? true">
        <input type="radio" name="status" value="N" title="禁用" th:checked="${ service.status == 'N'} ? true">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <textarea name="remark" placeholder="请输入内容" th:text="${ service.remark }" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-tab layui-tab-brief" style="margin-left: 20px;">
      <ul class="layui-tab-title">
        <li class="layui-this">请求参数</li>
        <li>返回参数</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <!--table 定义-->
          <table id="LAY-atomic-param-table" lay-filter="LAY-atomic-param-table"></table>
        </div>
        <div class="layui-tab-item">
          <table id="LAY-atomic-result-table" lay-filter="LAY-atomic-result-table"></table>
        </div>
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="LAY-atomic-front-submit" id="LAY-atomic-front-submit" value="确认">
    </div>
  </div>

  <script th:src="@{/layui/layui.js}"></script>
  <script>
    layui.config({
      base: '/'
    }).use(['index', 'flying'], function () {
      const $ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,table = layui.table
        ,layer = layui.layer
        ,dropdown = layui.dropdown
        ,util = layui.util
        ,flying = layui.flying;

      layui.laydate.render({
        elem: '#startDate' //指定元素
        , trigger: 'click'
        , format: 'yyyy-MM-dd'
        , type: 'date'
      });

      layui.laydate.render({
        elem: '#endDate' //指定元素
        , trigger: 'click'
        , format: 'yyyy-MM-dd'
        , type: 'date'
      });

      // 普通事件
      util.on('lay-on', {
        // 获取密钥
        "get-secret": function(othis){
          //提交 Ajax 成功后，静态更新表格中的数据
          admin.req({
            url: '/esb/application/getSecret',
            type: 'post',
            success: function (res) {
              //执行成功
              layer.msg(res.msg, {icon: 1});
              form.val('atomic-form-edit', {
                "appSecret" : res.data
              });
            }
          });
        }
      });

      // 请求参数
      flying.table({
        elem: '#LAY-atomic-param-table',
        url: '/esb/atomic/service/param/page', //数据接口
        cols: [
          {type: 'numbers', fixed: 'left', title: '序号'}
          , {field: 'paramSource', title: '参数属性', minWidth: 100}
          , {field: 'paramName', title: '参数名称', minWidth: 100}
          , {field: 'paramType', title: '参数类型', minWidth: 100}
          , {field: 'paramRequired', title: '是否必填', minWidth: 100}
          , {field: 'paramTarget', title: '映射目标属性', minWidth: 100}
          , {field: 'remark', title: '备注', minWidth: 250}
          , {field: 'status', title: '使用状态', width: 90, templet: '#statusSwitchTpl', unresize: true}
          , {field: 'updatedBy', title: '修改人', minWidth: 90}
          , {field: 'updatedTime', title: '修改时间', templet: '<div>{{ layui.util.toDateString(d.updatedTime, "yyyy-MM-dd HH:mm:ss") }}</div>', minWidth: 170, sort: true}
          , {title: '操作', width: 160, align: 'center', fixed: 'right', toolbar: '#atomic-table'}
        ]
      });

      flying.table({
        elem: '#LAY-atomic-result-table',
        url: '/esb/atomic/service/result/page', //数据接口
        cols: [
          {type: 'numbers', fixed: 'left', title: '序号'}
          , {field: 'resultSource', title: '参数属性', minWidth: 100}
          , {field: 'resultName', title: '参数名称', minWidth: 100}
          , {field: 'resultType', title: '参数类型', minWidth: 100}
          , {field: 'resultRequired', title: '是否必填', minWidth: 100}
          , {field: 'resultTarget', title: '映射目标属性', minWidth: 100}
          , {field: 'remark', title: '备注', minWidth: 250}
          , {field: 'status', title: '使用状态', width: 90, templet: '#statusSwitchTpl', unresize: true}
          , {field: 'updatedBy', title: '修改人', minWidth: 90}
          , {field: 'updatedTime', title: '修改时间', templet: '<div>{{ layui.util.toDateString(d.updatedTime, "yyyy-MM-dd HH:mm:ss") }}</div>', minWidth: 170, sort: true}
          , {title: '操作', width: 160, align: 'center', fixed: 'right', toolbar: '#atomic-table'}
        ]
      });

    });
  </script>
</body>
</html>